<template>
  <div class="finance-container">
    <div class="finance-header">
      <div class="header-left">
        <h2 class="page-title">
          <Icon name="fa fa-money-bill-alt" size="24" /> 财务管理中心
        </h2>
        <p class="date-info">{{ currentDate }} {{ weekDay }}</p>
      </div>
      <div class="header-right">
        <el-dropdown>
          <el-button type="primary">
            <Icon name="el-icon-Plus" /> 财务操作<Icon name="el-icon-ArrowDown" class="el-icon--right" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleQuickAction('invoice')">
                <Icon name="el-icon-Tickets" /> 新增发票
              </el-dropdown-item>
              <el-dropdown-item @click="handleQuickAction('receipt')">
                <Icon name="el-icon-Document" /> 录入收款
              </el-dropdown-item>
              <el-dropdown-item @click="handleQuickAction('payment')">
                <Icon name="el-icon-Money" /> 执行付款
              </el-dropdown-item>
              <el-dropdown-item @click="handleQuickAction('report')">
                <Icon name="el-icon-Document" /> 生成报表
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <el-row :gutter="20" class="finance-dashboard">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(card, index) in financeCards" :key="index">
        <el-card class="finance-card" :body-style="{ padding: '0px' }">
          <div class="card-content" :class="`card-color-${index % 5}`">
            <div class="card-icon">
              <Icon :name="`el-icon-${card.icon}`" />
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
              <div class="card-trend" :class="card.trend > 0 ? 'trend-up' : 'trend-down'">
                <Icon :name="card.trend > 0 ? 'el-icon-ArrowUp' : 'el-icon-ArrowDown'" />
                <span>{{ Math.abs(card.trend) }}% {{ card.trend > 0 ? '增长' : '下降' }}</span>
                <span class="trend-period">较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 功能模块导航 -->
    <div class="function-modules">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="module in functionModules" :key="module.id">
          <div class="module-card" @click="navigateToModule(module.id)">
            <div class="module-icon" :style="{ backgroundColor: module.color }">
              <Icon :name="`el-icon-${module.icon}`" />
            </div>
            <div class="module-info">
              <h4>{{ module.title }}</h4>
              <p>{{ module.desc }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <el-row :gutter="20" class="finance-charts">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="el-icon-TrendCharts" /> 收入支出趋势</span>
              <el-radio-group v-model="incomeExpenseTimeRange" size="small">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="quarter">季</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <IncomeExpenseChart :chartData="incomeExpenseData" :timeRange="incomeExpenseTimeRange" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="el-icon-Money" /> 现金流分析</span>
              <el-select v-model="cashFlowYear" size="small" placeholder="选择年份">
                <el-option v-for="year in availableYears" :key="year" :label="year + '年'" :value="year" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <CashFlowChart :chartData="cashFlowData" :year="cashFlowYear" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 财务健康状况仪表盘 -->
    <el-row :gutter="20" class="finance-charts">
      <el-col :span="24">
        <el-card class="chart-card finance-health" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-heartbeat" /> 财务健康状况</span>
              <el-tooltip content="企业各项财务指标的综合评估">
                <Icon name="el-icon-QuestionFilled" />
              </el-tooltip>
            </div>
          </template>
          <div class="health-dashboard">
            <div class="gauge-charts">
              <div class="gauge-item" v-for="(gauge, index) in healthGauges" :key="index">
                <h4>{{ gauge.title }}</h4>
                <div class="gauge-container">
                  <FinanceGaugeChart :score="gauge.score" :color="gauge.color" />
                </div>
                <div class="gauge-info" :class="gauge.status">{{ gauge.statusText }}</div>
              </div>
            </div>
            <div class="health-tips">
              <h4><Icon name="el-icon-Warning" class="warning-icon" /> 财务建议</h4>
              <ul>
                <li v-for="(tip, index) in healthTips" :key="index">{{ tip }}</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="finance-charts">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="el-icon-PieChart" /> 收入构成</span>
              <el-select v-model="incomeStructureQuarter" size="small">
                <el-option v-for="quarter in quarters" :key="quarter.value" :label="quarter.label" :value="quarter.value" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <IncomeStructureChart :chartData="incomeStructureData" :quarter="incomeStructureQuarter" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="el-icon-PieChart" /> 支出构成</span>
              <el-select v-model="expenseStructureQuarter" size="small">
                <el-option v-for="quarter in quarters" :key="quarter.value" :label="quarter.label" :value="quarter.value" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <ExpenseStructureChart :chartData="expenseStructureData" :quarter="expenseStructureQuarter" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 预算执行情况 -->
    <el-row :gutter="20" class="finance-charts">
      <el-col :span="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-tasks" /> 预算执行情况</span>
              <el-select v-model="budgetDepartment" size="small">
                <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" />
              </el-select>
            </div>
          </template>
          <div class="budget-progress">
            <div class="budget-item" v-for="(item, index) in budgetData" :key="index">
              <div class="budget-info">
                <div class="budget-category">{{ item.category }}</div>
                <div class="budget-values">
                  <span class="budget-actual">¥{{ formatNumber(item.actual) }}</span>
                  <span class="budget-total">/ ¥{{ formatNumber(item.total) }}</span>
                </div>
              </div>
              <el-progress 
                :percentage="Math.min(100, (item.actual / item.total) * 100)" 
                :color="getBudgetColor(item.actual, item.total)"
                :status="getBudgetStatus(item.actual, item.total)"
                :stroke-width="15"
                :format="(percentage) => percentage.toFixed(1) + '%'"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="finance-table-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>
                <Icon :name="receivablePayableType === 'receivable' ? 'fa fa-credit-card' : 'fa fa-money-bill'" /> 
                {{ receivablePayableType === 'receivable' ? '应收账款管理' : '应付账款管理' }}
              </span>
              <div class="header-actions">
                <el-radio-group v-model="receivablePayableType" size="small">
                  <el-radio-button label="receivable">应收</el-radio-button>
                  <el-radio-button label="payable">应付</el-radio-button>
                </el-radio-group>
                <el-button type="primary" size="small" @click="handleViewMore">
                  查看更多
                  <Icon name="el-icon-ArrowRight" class="el-icon--right" />
                </el-button>
              </div>
            </div>
          </template>
          
          <div class="table-summary">
            <div class="summary-item">
              <div class="summary-label">总金额</div>
              <div class="summary-value">¥{{ formatNumber(receivablePayableSummary.total) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">已结清</div>
              <div class="summary-value">¥{{ formatNumber(receivablePayableSummary.cleared) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">待结清</div>
              <div class="summary-value pending">¥{{ formatNumber(receivablePayableSummary.pending) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">已逾期</div>
              <div class="summary-value overdue">¥{{ formatNumber(receivablePayableSummary.overdue) }}</div>
            </div>
          </div>
          
          <el-table :data="receivablePayableTableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="code" label="单号" width="150" />
            <el-table-column prop="customer" label="客户/供应商" min-width="180" show-overflow-tooltip />
            <el-table-column prop="amount" label="金额" width="120" align="right" />
            <el-table-column prop="dueDate" label="到期日" width="120" />
            <el-table-column label="账龄" width="100">
              <template #default="scope">
                {{ calculateAging(scope.row.date, scope.row.dueDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)" size="small">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button type="primary" link size="small" @click="handleDetail(scope.row)">查看</el-button>
                <el-button type="success" link size="small" v-if="scope.row.status !== '已结清'" @click="handleProcess(scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <div class="table-footer">
            <el-pagination
              background
              layout="prev, pager, next, sizes"
              :total="50"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="10"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 底部税务日历 -->
    <el-row :gutter="20" class="tax-reminder">
      <el-col :span="24">
        <el-card class="tax-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-calendar-check" /> 税务提醒</span>
              <el-button type="success" size="small" plain @click="handleTaxSettings">
                税务设置
              </el-button>
            </div>
          </template>
          <div class="tax-items">
            <div v-for="(item, index) in taxCalendar" :key="index" class="tax-item" :class="{ 'tax-coming': item.daysLeft <= 7 }">
              <div class="tax-info">
                <div class="tax-title">{{ item.title }}</div>
                <div class="tax-desc">{{ item.description }}</div>
              </div>
              <div class="tax-date">
                <div class="days-left" :class="{ 'days-urgent': item.daysLeft <= 3 }">
                  {{ item.daysLeft }}天
                </div>
                <div class="deadline">{{ item.deadline }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 财务快报 -->
    <el-row :gutter="20" class="finance-news">
      <el-col :span="24">
        <el-card class="news-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-newspaper" /> 财务快报</span>
              <el-button type="primary" size="small" plain @click="handleViewAllNews">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="news-container">
            <div v-for="(news, index) in financeNews" :key="index" class="news-item">
              <div class="news-icon" :class="news.type">
                <Icon :name="getNewsIcon(news.type)" color="#ffffff" />
              </div>
              <div class="news-content">
                <div class="news-title">
                  {{ news.title }}
                  <el-tag v-if="news.important" size="small" type="danger" effect="dark">重要</el-tag>
                </div>
                <div class="news-desc">{{ news.content }}</div>
                <div class="news-footer">
                  <span class="news-time">{{ news.time }}</span>
                  <el-button type="primary" link size="small" @click="handleNewsDetail(news)">
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 金融数据 -->
    <el-row :gutter="20" class="finance-rates">
      <el-col :xs="24" :md="12">
        <el-card class="rate-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-exchange-alt" /> 汇率信息</span>
              <span class="update-time">{{ ratesUpdateTime }} 更新</span>
            </div>
          </template>
          <div class="rate-list">
            <div v-for="(rate, index) in exchangeRates" :key="index" class="rate-item">
              <div class="rate-name">{{ rate.name }}</div>
              <div class="rate-value">{{ rate.value }}</div>
              <div class="rate-change" :class="rate.change > 0 ? 'rate-up' : 'rate-down'">
                <Icon :name="rate.change > 0 ? 'fa fa-caret-up' : 'fa fa-caret-down'" :color="rate.change > 0 ? '#F56C6C' : '#67C23A'" />
                {{ Math.abs(rate.change) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="12">
        <el-card class="loan-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span><Icon name="fa fa-landmark" /> 贷款利率</span>
              <el-select v-model="loanRateType" size="small" placeholder="选择类型">
                <el-option label="贷款市场报价利率(LPR)" value="lpr" />
                <el-option label="存款基准利率" value="deposit" />
              </el-select>
            </div>
          </template>
          <div class="loan-rate-table">
            <el-table :data="currentLoanRates" size="small" border style="width: 100%">
              <el-table-column prop="term" label="期限" width="120" />
              <el-table-column prop="rate" label="利率" />
              <el-table-column prop="updateDate" label="发布日期" width="120" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineComponent } from 'vue'
import IncomeExpenseChart from './components/IncomeExpenseChart.vue'
import CashFlowChart from './components/CashFlowChart.vue'
import IncomeStructureChart from './components/IncomeStructureChart.vue'
import ExpenseStructureChart from './components/ExpenseStructureChart.vue'
import FinanceGaugeChart from './components/FinanceGaugeChart.vue'

// 财务卡片数据
const financeCards = ref([
  { 
    title: '本月收入', 
    value: '¥ 358,926.00', 
    trend: 12.5, 
    icon: 'Money' 
  },
  { 
    title: '本月支出', 
    value: '¥ 245,781.00', 
    trend: 8.3, 
    icon: 'Wallet' 
  },
  { 
    title: '利润', 
    value: '¥ 113,145.00', 
    trend: 15.2, 
    icon: 'TrendCharts' 
  },
  { 
    title: '应收账款', 
    value: '¥ 543,210.00', 
    trend: -3.8, 
    icon: 'Collection' 
  },
  { 
    title: '应付账款', 
    value: '¥ 376,450.00', 
    trend: 5.6, 
    icon: 'Sell' 
  },
  { 
    title: '销售订单', 
    value: '128', 
    trend: 23.5, 
    icon: 'ShoppingCart' 
  },
  { 
    title: '采购订单', 
    value: '87', 
    trend: 7.2, 
    icon: 'Promotion' 
  },
  { 
    title: '资产总值', 
    value: '¥ 3,254,780.00', 
    trend: 2.8, 
    icon: 'Histogram' 
  }
])

// 收入支出趋势图
const incomeExpenseTimeRange = ref('month')
const incomeExpenseData = ref({
  income: [28000, 42000, 36500, 39800, 46200, 38700, 48500, 52300, 43600, 47800, 54200, 58900],
  expense: [21000, 28500, 25600, 27300, 32400, 29800, 33500, 36200, 30800, 32500, 38600, 41200]
})

// 现金流图表
const availableYears = ref([2021, 2022, 2023, 2024])
const cashFlowYear = ref(2024)
const cashFlowData = ref({
  inflow: [128000, 134500, 142800, 138600, 156200, 148700, 163200, 172000, 158600, 168400, 175600, 183000],
  outflow: [98000, 102300, 112600, 108400, 124600, 118200, 128600, 138500, 126800, 136200, 142300, 148600],
  netflow: [30000, 32200, 30200, 30200, 31600, 30500, 34600, 33500, 31800, 32200, 33300, 34400]
})

// 收入构成图表
const quarters = ref([
  { label: '2023年第一季度', value: '2023Q1' },
  { label: '2023年第二季度', value: '2023Q2' },
  { label: '2023年第三季度', value: '2023Q3' },
  { label: '2023年第四季度', value: '2023Q4' },
  { label: '2024年第一季度', value: '2024Q1' }
])
const incomeStructureQuarter = ref('2024Q1')
const incomeStructureData = ref({
  '2024Q1': [
    { name: '产品销售', value: 68 },
    { name: '服务收入', value: 22 },
    { name: '配件销售', value: 7 },
    { name: '其他收入', value: 3 }
  ]
})

// 支出构成图表
const expenseStructureQuarter = ref('2024Q1')
const expenseStructureData = ref({
  '2024Q1': [
    { name: '原材料', value: 42 },
    { name: '人工成本', value: 28 },
    { name: '制造费用', value: 15 },
    { name: '销售费用', value: 8 },
    { name: '管理费用', value: 5 },
    { name: '其他支出', value: 2 }
  ]
})

// 应收/应付表格
const receivablePayableType = ref('receivable')
const receivablePayableTableData = computed(() => {
  if (receivablePayableType.value === 'receivable') {
    return [
      {
        date: '2024-04-01',
        code: 'AR20240401001',
        customer: '重庆雄狮科技有限公司',
        amount: '¥ 58,600.00',
        dueDate: '2024-05-01',
        status: '未结清'
      },
      {
        date: '2024-03-25',
        code: 'AR20240325002',
        customer: '成都天府智能科技公司',
        amount: '¥ 36,800.00',
        dueDate: '2024-04-25',
        status: '未结清'
      },
      {
        date: '2024-03-18',
        code: 'AR20240318003',
        customer: '重庆渝电电子设备有限公司',
        amount: '¥ 47,200.00',
        dueDate: '2024-03-25',
        status: '已逾期'
      },
      {
        date: '2024-03-10',
        code: 'AR20240310004',
        customer: '长沙机械制造厂',
        amount: '¥ 28,500.00',
        dueDate: '2024-04-10',
        status: '结清中'
      },
      {
        date: '2024-03-01',
        code: 'AR20240301005',
        customer: '北京科技创新公司',
        amount: '¥ 65,300.00',
        dueDate: '2024-04-01',
        status: '已结清'
      }
    ]
  } else {
    return [
      {
        date: '2024-04-05',
        code: 'AP20240405001',
        customer: '上海精密仪器制造厂',
        amount: '¥ 42,800.00',
        dueDate: '2024-05-05',
        status: '未结清'
      },
      {
        date: '2024-03-28',
        code: 'AP20240328002',
        customer: '广州先进材料有限公司',
        amount: '¥ 35,600.00',
        dueDate: '2024-04-28',
        status: '未结清'
      },
      {
        date: '2024-03-20',
        code: 'AP20240320003',
        customer: '深圳电子科技有限公司',
        amount: '¥ 26,400.00',
        dueDate: '2024-04-20',
        status: '结清中'
      },
      {
        date: '2024-03-15',
        code: 'AP20240315004',
        customer: '重庆金属加工厂',
        amount: '¥ 18,700.00',
        dueDate: '2024-03-30',
        status: '已逾期'
      },
      {
        date: '2024-03-05',
        code: 'AP20240305005',
        customer: '天津润滑油有限公司',
        amount: '¥ 22,300.00',
        dueDate: '2024-04-05',
        status: '已结清'
      }
    ]
  }
})

// 查看更多
const handleViewMore = () => {
  console.log('查看更多', receivablePayableType.value)
  // 跳转到对应的应收/应付账款页面
}

// 添加日期相关数据
const currentDate = ref(new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }))
const weekDay = ref(new Date().toLocaleDateString('zh-CN', { weekday: 'long' }))

// 快捷操作处理函数
const handleQuickAction = (action: string) => {
  console.log('执行快捷操作:', action)
  // 后续可以添加具体的操作逻辑
}

// 功能模块数据
const functionModules = ref([
  {
    id: 'receivable-payable',
    title: '应收应付管理',
    desc: '监控客户回款和供应商付款',
    icon: 'CreditCard',
    color: '#409EFF'
  },
  {
    id: 'invoice-bill',
    title: '发票账单管理',
    desc: '电子发票自动核对',
    icon: 'Tickets',
    color: '#67C23A'
  },
  {
    id: 'cost-expense',
    title: '成本费用控制',
    desc: '分析经营成本，优化支出',
    icon: 'Discount',
    color: '#E6A23C'
  },
  {
    id: 'cash-flow',
    title: '现金流管理',
    desc: '智能预测资金流向',
    icon: 'Money',
    color: '#F56C6C'
  },
  {
    id: 'financial-reports',
    title: '财务报表',
    desc: '生成多维度财务报表',
    icon: 'DataLine',
    color: '#909399'
  },
  {
    id: 'tax-settlement',
    title: '税务结算',
    desc: '税务合规管理，简化流程',
    icon: 'OfficeBuilding',
    color: '#9254de'
  }
])

// 模块导航函数
const navigateToModule = (moduleId: string) => {
  console.log('导航到模块:', moduleId)
  // 后续可以添加具体的导航逻辑
}

// 财务健康状况仪表盘数据
const healthGauges = ref([
  { 
    title: '流动比率', 
    score: 85, 
    color: '#67C23A',
    status: 'good',
    statusText: '健康' 
  },
  { 
    title: '资产负债率', 
    score: 62, 
    color: '#E6A23C',
    status: 'warning',
    statusText: '正常' 
  },
  { 
    title: '毛利率', 
    score: 78, 
    color: '#67C23A',
    status: 'good',
    statusText: '良好' 
  },
  { 
    title: '应收账款周转率', 
    score: 45, 
    color: '#F56C6C',
    status: 'danger',
    statusText: '风险' 
  }
])

const healthTips = ref([
  '应收账款周转率较低，建议优化信用政策，加强应收账款管理',
  '资产负债率处于较高水平，需控制负债规模，防范财务风险',
  '现金流状况良好，可考虑适度扩大投资规模',
  '流动比率良好，短期偿债能力较强'
])

// 预算执行情况
const departments = ref([
  { label: '全公司', value: 'all' },
  { label: '生产部门', value: 'production' },
  { label: '销售部门', value: 'sales' },
  { label: '研发部门', value: 'rd' },
  { label: '行政部门', value: 'admin' }
])

const budgetDepartment = ref('all')

const budgetData = ref([
  { category: '人力资源', actual: 854000, total: 900000 },
  { category: '研发费用', actual: 1230000, total: 1000000 },
  { category: '营销推广', actual: 456000, total: 600000 },
  { category: '办公运营', actual: 320000, total: 350000 },
  { category: '设备采购', actual: 780000, total: 800000 }
])

// 格式化数字函数
const formatNumber = (num: number) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 获取预算颜色
const getBudgetColor = (actual: number, total: number) => {
  const percentage = (actual / total) * 100
  if (percentage >= 100) {
    return '#F56C6C' // 超出预算
  } else if (percentage >= 80) {
    return '#E6A23C' // 接近预算
  } else {
    return '#67C23A' // 控制良好
  }
}

// 获取预算状态
const getBudgetStatus = (actual: number, total: number) => {
  const percentage = (actual / total) * 100
  if (percentage >= 100) {
    return 'exception' // 超出预算
  } else if (percentage >= 90) {
    return 'warning' // 接近预算
  }
  return '' // 正常状态
}

// 应收/应付账款汇总数据
const receivablePayableSummary = computed(() => {
  if (receivablePayableType.value === 'receivable') {
    return {
      total: 1280000,
      cleared: 632000,
      pending: 568000,
      overdue: 80000
    }
  } else {
    return {
      total: 960000,
      cleared: 520000,
      pending: 398000,
      overdue: 42000
    }
  }
})

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, 'danger' | 'success' | 'warning' | 'info'> = {
    '已逾期': 'danger',
    '已结清': 'success',
    '结清中': 'warning',
    '未结清': 'info'
  }
  return typeMap[status] || 'info'
}

// 计算账龄
const calculateAging = (date: string, dueDate: string) => {
  const today = new Date()
  const createDate = new Date(date)
  const diffTime = today.getTime() - createDate.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays < 30) {
    return '1个月内'
  } else if (diffDays < 60) {
    return '1-2个月'
  } else if (diffDays < 90) {
    return '2-3个月'
  } else {
    return '3个月以上'
  }
}

// 分页处理
const handleSizeChange = (size: number) => {
  console.log('每页条数变化:', size)
}

const handleCurrentChange = (page: number) => {
  console.log('当前页变化:', page)
}

// 详情查看
const handleDetail = (row: any) => {
  console.log('查看详情:', row)
}

// 处理付款
const handleProcess = (row: any) => {
  console.log('处理付款:', row)
}

// 税务设置
const handleTaxSettings = () => {
  console.log('进入税务设置')
}

// 税务日历
const taxCalendar = ref([
  { 
    title: '增值税申报', 
    description: '4月增值税电子申报',
    deadline: '2024-05-15',
    daysLeft: 5
  },
  { 
    title: '企业所得税预缴', 
    description: '第二季度所得税预缴申报',
    deadline: '2024-04-25',
    daysLeft: 2
  },
  { 
    title: '印花税申报', 
    description: '合同印花税按月申报',
    deadline: '2024-05-10',
    daysLeft: 12
  },
  { 
    title: '社保缴纳', 
    description: '5月员工社保缴纳',
    deadline: '2024-05-15',
    daysLeft: 7
  }
])

// 财务快报
const financeNews = ref([
  {
    title: '重要财务公告',
    content: '公司发布重要财务公告，详细内容请查看公告内容',
    time: '2024-04-15',
    type: 'announcement',
    important: true
  },
  {
    title: '财务报表发布',
    content: '公司已发布最新季度财务报表，详细内容请查看财务报表',
    time: '2024-04-10',
    type: 'report'
  },
  {
    title: '财务分析会议通知',
    content: '公司将于下周三下午2点召开财务分析会议，请相关人员准时参加',
    time: '2024-04-05',
    type: 'meeting'
  }
])

// 获取财务快报图标
const getNewsIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    'announcement': 'fa fa-bullhorn',
    'report': 'fa fa-file-alt',
    'meeting': 'fa fa-users'
  }
  return iconMap[type] || 'fa fa-info-circle'
}

// 查看全部财务快报
const handleViewAllNews = () => {
  console.log('查看全部财务快报')
}

// 查看财务快报详情
const handleNewsDetail = (news: any) => {
  console.log('查看财务快报详情:', news)
}

// 金融数据
const exchangeRates = ref([
  { name: '美元', value: '6.85', change: 0.01 },
  { name: '欧元', value: '7.80', change: -0.02 },
  { name: '英镑', value: '8.50', change: 0.01 },
  { name: '日元', value: '0.06', change: 0.001 },
  { name: '澳元', value: '4.50', change: -0.01 }
])

const ratesUpdateTime = ref('每小时更新')

const loanRateType = ref('lpr')
const currentLoanRates = ref([
  { term: '1年', rate: '3.65%', updateDate: '2024-04-10' },
  { term: '3年', rate: '4.25%', updateDate: '2024-04-10' },
  { term: '5年', rate: '4.50%', updateDate: '2024-04-10' }
])

onMounted(() => {
  // 这里可以加载实际数据
  console.log('财务管理页面加载完成')
})
</script>

<style scoped lang="scss">
.finance-container {
  padding: 20px;
  
  .finance-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-left {
      .page-title {
        font-size: 24px;
        font-weight: 500;
        color: #303133;
        margin: 0 0 5px 0;
      }
      
      .date-info {
        font-size: 14px;
        color: #606266;
        margin: 0;
      }
    }
    
    .header-right {
      .el-dropdown {
        .el-button {
          background-color: #409eff;
          color: #fff;
          border: none;
          padding: 8px 16px;
          border-radius: 4px;
          transition: all 0.3s;
          
          &:hover {
            background-color: #66b1ff;
          }
        }
      }
    }
  }
  
  .finance-dashboard {
    margin-bottom: 20px;
    
    .finance-card { 
      margin-bottom: 20px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      
      .card-content {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        
        &.card-color-0 {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          .card-icon, .card-info .card-title, .card-info .card-value, .card-trend {
            color: #fff;
          }
        }
        
        &.card-color-1 {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          .card-icon, .card-info .card-title, .card-info .card-value, .card-trend {
            color: #fff;
          }
        }
        
        &.card-color-2 {
          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          .card-icon, .card-info .card-title, .card-info .card-value, .card-trend {
            color: #fff;
          }
        }
        
        &.card-color-3 {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          .card-icon, .card-info .card-title, .card-info .card-value, .card-trend {
            color: #fff;
          }
        }
        
        &.card-color-4 {
          background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
          .card-icon, .card-info .card-title, .card-info .card-value, .card-trend {
            color: #fff;
          }
        }
        
        .card-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          
          .el-icon {
            font-size: 28px;
          }
        }
        
        .card-info {
          flex: 1;
          
          .card-title {
            font-size: 14px;
            margin-bottom: 8px;
          }
          
          .card-value {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 8px;
          }
          
          .card-trend {
            display: flex;
            align-items: center;
            font-size: 12px;
            
            .el-icon {
              margin-right: 4px;
            }
            
            .trend-period {
              margin-left: 6px;
              opacity: 0.8;
            }
            
            &.trend-up {
              color: #ffffff;
            }
            
            &.trend-down {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  
  .function-modules {
    margin-bottom: 20px;
    
    .module-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      height: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      transition: transform 0.3s, box-shadow 0.3s;
      margin-bottom: 20px;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
      }
      
      .module-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }
      
      .module-info {
        flex: 1;
        
        h4 {
          margin: 0 0 5px 0;
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
  
  .finance-charts {
    margin-bottom: 20px;
    
    .chart-card {
      margin-bottom: 20px;
      border-radius: 10px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          display: flex;
          align-items: center;
          
          .el-icon {
            margin-right: 5px;
          }
        }
      }
      
      .chart-container {
        height: 350px;
        width: 100%;
      }
      
      &.finance-health {
        .health-dashboard {
          display: flex;
          flex-wrap: wrap;
          
          .gauge-charts {
            display: flex;
            flex-wrap: wrap;
            flex: 3;
            margin: -10px;
            
            .gauge-item {
              width: calc(50% - 20px);
              text-align: center;
              padding: 10px;
              margin: 10px;
              background-color: #f8f9fa;
              border-radius: 8px;
              
              h4 {
                font-size: 14px;
                color: #606266;
                margin: 0 0 10px 0;
              }
              
              .gauge-container {
                height: 120px;
              }
              
              .gauge-info {
                margin-top: 10px;
                font-size: 14px;
                font-weight: 600;
                
                &.good {
                  color: #67C23A;
                }
                
                &.warning {
                  color: #E6A23C;
                }
                
                &.danger {
                  color: #F56C6C;
                }
              }
            }
          }
          
          .health-tips {
            flex: 2;
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-left: 15px;
            
            h4 {
              font-size: 16px;
              font-weight: 600;
              color: #303133;
              margin: 0 0 15px 0;
              display: flex;
              align-items: center;
              
              .warning-icon {
                margin-right: 5px;
                color: #E6A23C;
              }
            }
            
            ul {
              padding-left: 20px;
              margin: 0;
              
              li {
                margin-bottom: 10px;
                color: #606266;
                font-size: 14px;
                
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
    
    .budget-progress {
      padding: 10px;
      
      .budget-item {
        margin-bottom: 20px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .budget-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          
          .budget-category {
            font-size: 14px;
            color: #606266;
          }
          
          .budget-values {
            font-size: 14px;
            
            .budget-actual {
              font-weight: 600;
              color: #303133;
            }
            
            .budget-total {
              color: #909399;
            }
          }
        }
      }
    }
  }
  
  .finance-table-card {
    margin-bottom: 20px;
    border-radius: 10px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
      
      .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
    
    .table-summary {
      display: flex;
      margin-bottom: 20px;
      background-color: #f8f9fa;
      border-radius: 6px;
      padding: 15px;
      
      .summary-item {
        flex: 1;
        text-align: center;
        border-right: 1px solid #ebeef5;
        
        &:last-child {
          border-right: none;
        }
        
        .summary-label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .summary-value {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          
          &.pending {
            color: #E6A23C;
          }
          
          &.overdue {
            color: #F56C6C;
          }
        }
      }
    }
    
    .table-footer {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  .tax-reminder {
    margin-bottom: 20px;
    
    .tax-card {
      border-radius: 10px;
      
      .tax-items {
        display: flex;
        flex-wrap: wrap;
        
        .tax-item {
          width: 25%;
          padding: 15px;
          display: flex;
          justify-content: space-between;
          border-right: 1px solid #ebeef5;
          
          &:nth-child(4n) {
            border-right: none;
          }
          
          &.tax-coming {
            background-color: rgba(230, 162, 60, 0.1);
          }
          
          .tax-info {
            .tax-title {
              font-size: 16px;
              font-weight: 600;
              color: #303133;
              margin-bottom: 5px;
            }
            
            .tax-desc {
              font-size: 12px;
              color: #909399;
            }
          }
          
          .tax-date {
            text-align: right;
            
            .days-left {
              font-size: 18px;
              font-weight: 600;
              color: #67C23A;
              margin-bottom: 5px;
              
              &.days-urgent {
                color: #F56C6C;
              }
            }
            
            .deadline {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
    }
  }
  
  .finance-news {
    margin-bottom: 20px;
    
    .news-card {
      border-radius: 10px;
      
      .news-container {
        display: flex;
        flex-direction: column;
        
        .news-item {
          width: 100%;
          padding: 15px;
          display: flex;
          align-items: flex-start;
          border-bottom: 1px solid #ebeef5;
          
          &:last-child {
            border-bottom: none;
          }
          
          .news-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            
            &.announcement {
              background-color: #F56C6C;
            }
            
            &.report {
              background-color: #409EFF;
            }
            
            &.meeting {
              background-color: #67C23A;
            }
          }
          
          .news-content {
            flex: 1;
            
            .news-title {
              font-size: 16px;
              font-weight: 600;
              color: #303133;
              margin-bottom: 5px;
              display: flex;
              align-items: center;
              
              .el-tag {
                margin-left: 8px;
              }
            }
            
            .news-desc {
              font-size: 14px;
              color: #606266;
              margin-bottom: 8px;
              line-height: 1.5;
            }
            
            .news-footer {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .news-time {
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
      }
    }
  }
  
  .finance-rates {
    margin-bottom: 20px;
    
    .rate-card,
    .loan-card {
      border-radius: 10px;
      margin-bottom: 20px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          display: flex;
          align-items: center;
          
          .update-time {
            font-size: 12px;
            font-weight: normal;
            color: #909399;
            margin-left: 10px;
          }
        }
      }
      
      .rate-list {
        display: flex;
        flex-wrap: wrap;
        
        .rate-item {
          width: 25%;
          padding: 15px;
          text-align: center;
          border-right: 1px solid #ebeef5;
          
          &:nth-child(4n) {
            border-right: none;
          }
          
          .rate-name {
            font-size: 14px;
            color: #606266;
            margin-bottom: 5px;
          }
          
          .rate-value {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .rate-change {
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.rate-up {
              color: #F56C6C;
            }
            
            &.rate-down {
              color: #67C23A;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .finance-container {
    .finance-header {
      flex-direction: column;
      align-items: flex-start;
      
      .header-left {
        margin-bottom: 15px;
      }
    }
    
    .finance-dashboard {
      .finance-card {
        height: auto;
        
        .card-content {
          flex-direction: column;
          padding: 15px 0;
          text-align: center;
          
          .card-icon {
            margin-right: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
    
    .finance-charts {
      .chart-container {
        height: 300px !important;
      }
      
      .chart-card {
        &.finance-health {
          .health-dashboard {
            flex-direction: column;
            
            .gauge-charts {
              margin: 0 0 15px 0;
              
              .gauge-item {
                width: calc(50% - 20px);
                margin: 10px;
              }
            }
            
            .health-tips {
              margin-left: 0;
            }
          }
        }
      }
    }
    
    .table-summary {
      flex-wrap: wrap;
      
      .summary-item {
        width: 50%;
        flex: none;
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid #ebeef5;
        
        &:nth-child(odd) {
          border-right: 1px solid #ebeef5;
        }
        
        &:nth-last-child(1),
        &:nth-last-child(2) {
          border-bottom: none;
        }
      }
    }
    
    .header-actions {
      flex-direction: column;
      align-items: flex-end !important;
      gap: 5px !important;
    }
    
    .tax-reminder {
      .tax-items {
        .tax-item {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid #ebeef5;
          
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    
    .finance-news {
      .news-container {
        .news-item {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid #ebeef5;
          
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    
    .finance-rates {
      .rate-list {
        .rate-item {
          width: 50%;
          
          &:nth-child(2n) {
            border-right: none;
          }
          
          &:nth-child(4n) {
            border-right: 1px solid #ebeef5;
          }
        }
      }
    }
  }
}
</style> 